<template>
<view>
	<view class="head-part">
		<view class="iconfont icon-geshuishezhi"></view>
		<view class="content">
			<view class="info">
				<span class="single-info">{{customer.name}}</span>
				<span class="single-info" @click.stop="$common.callPhone(customer.phone)">{{customer.phone}}</span>
				<span class="single-info">{{$common.buildSex(customer.sex)}}</span>
			</view>
			<view class="other-info">
				<span class="single-info">{{customer.worker.name}}</span>
				<span class="single-info">{{customer.createTime}}</span>
			</view>
			<view class="other-info">
				<span class="single-info">{{customer.shop.name}}</span>
			</view>
			
			<view class="add-card-btn" @click.stop="onAddCard()">开卡</view>
			<view class="on-prebook-btn" @click.stop="onPrebook()">预约</view>
		</view>
		
	</view>
	
	<scroll-view class="card-page-list" style="height: calc(100vh - 210rpx);" scroll-y="true">
		<view class="single-card" v-for="(card, index) in cardList" :key="card.id">
			<view :class="'title '+card.cardType"><b>{{buildCardName(card.cardType)}}</b> 创建于 {{card.createTime}}</view>
			<view class="content">
				<view class="label-group">
					<span class="label">有效天数：</span><span class="value">{{card.validDays}} 天</span>
				</view>
				<view class="label-group">
					<span class="label">有效期止：</span><span class="value">{{$common.buildValidEndDay(card.validDays)}}</span>
				</view>
				<view class="label-group">
					<span class="label">购卡金额：</span><span class="value">{{card.paidMoney}} 元</span>
				</view>
				<view class="label-group">
					<span class="label">购卡日期：</span><span class="value">{{card.createTime}} 元</span>
				</view>
				<view class="label-group" v-if="card.cardType === 'times' || card.cardType === 'surplus'">
					<span class="label">剩余：</span><span class="value">{{card.surplusWorth}} {{card.cardType==='times'?'次':'元'}}</span>
				</view>
				<view class="label-group">
					<span class="label">销售人员：</span><span class="value">{{card.worker.name}}</span>
				</view>
			</view>
		</view>
		<auto-empty msg="暂无卡券信息" v-if="cardList.length<=0"/>
	</scroll-view>
</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			id: 0,
			customer: {},
			cardList: [],
			loaded: false
		}
	},
	onLoad(options) {
		that = this;
		const id = options.id;
		that.id = id;
		that.loadData();
	},
	methods: {
		loadData: function() {
			that.$request.get("/customer/customerDetail", {id: that.id}).then((res) => {
				// console.log("========", res)
				that.customer = res.customer;
				that.cardList = res.cardList;
				that.loaded = true;
			})
		},
		buildCardName: function(cardType) {
			if(cardType==='times') {
				return "次数卡";
			} else if(cardType === 'surplus') {
				return "储值卡";
			} else if(cardType==='percent') {
				return "折扣卡";
			} else {
				return "-";
			}
		},
		onAddCard: function() {
			console.log("==========", that.customer)
			uni.navigateTo({
				url: "/pages/customer/add?id="+that.customer.id
			})
		},
		onPrebook: function() {
			
		}
	}
}
</script>

<style lang="scss">
.head-part {
	width: 100%; height: 200rpx; position: relative;
	background: linear-gradient(to bottom right, #fefefe, #ebebeb); border-top: 1px #ddd solid; border-bottom: 1px #ddd solid;
	box-shadow: 0px 0px 6px 6px #ccc; z-index: 999;
	
	.content {
		z-index: 999; position: relative; padding-left: 180rpx;
		
		.info {
			width: 100%; padding: 20rpx 30rpx; margin-top: 12rpx;
			
			.single-info {
				display: inline; padding: 0px 14rpx;
			}
		}
		
		.other-info {
			padding: 10rpx 30rpx; color:#888; font-size: 26rpx;
			.single-info {
				padding: 0px 14rpx;
			}
		}
	}
	.iconfont {
		top: 0px; font-size: 200rpx; color:#dfdfdf; width: 200rpx; height: 200rpx; position: absolute; z-index: 1;
	}
	
	.add-card-btn, .on-prebook-btn {
		position: absolute; right: 20rpx; top: 5rpx; height: 80rpx; background: #c35b00; color:#FFF; width: 80rpx; 
		border-radius: 40rpx; font-size: 24rpx; text-align: center; line-height: 80rpx;
	}
	.on-prebook-btn {
		top: 90rpx; background: #0780a1;
	}
}

.card-page-list {
	padding-bottom: 24rpx;
	
	.single-card {
		margin: 40rpx;
		
		.title {
			width: 100%; height: 70rpx; border: 1px #ddd solid; border-width: 1px 1px 0px 1px; border-radius: 20rpx 20rpx 0px 0px;
			font-size: 26rpx; color:#999; background:#e8e8e8; line-height: 70rpx;
			
			b {
				display: inline; color:#222; font-size: 32rpx; padding: 0px 20rpx;
			}
		}
		.title.times {
			background:#edfffd; color:#6db8b0;
			b {
				color:#2d716a;
			}
		}
		
		.title.percent {
			background:#eeedff; color:#918ec5;
			b {
				color:#3c3971;
			}
		}
		
		.title.surplus {
			background:#ffdec1; color:#92755b;
			b {
				color:#c35b00;
			}
		}
		
		.content {
			border:1px #ddd solid; width: 100%;
		}
	}
}
</style>
